<!-- 订单详情 -->
<template>
	<s-layout title="我的团队" class="index-wrap" :bgStyle="{ color: '#fbfbfb' }">
		<!-- 背景 -->
		<view class="state-box ss-flex-col ss-col-center ss-row-right" :style="[
        {
          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
          paddingTop: Number(statusBarHeight + 88) + 'rpx',
		  backgroundImage: 'url(' + sheep.$url.static('static/detail_bg.png') + ')'
        },
      ]">
		</view>

		<!-- 头像 -->
		<view class="order-address-box">
			<view class="order-top ss-flex ss-col-center ss-m-b-20">
				<view class="box">
					<image class="logo" :src="sheep.$url.cdn(userInfo.avatar)" mode=""></image>
				</view>
				<view class="des ss-m-l-10">
					<view class="ss-m-y-6  ss-flex ss-col-center">
						<view class="">
							{{userInfo.name || userInfo.nickname || userInfo.username}}
						</view>
						<view class="lev">
							<text class="">{{ userInfo.level_name }} </text>
						</view>
					</view>
					<view class="ss-m-t-10 id">
						ID：{{userInfo.id || '-'}}
					</view>
				</view>
			</view>
			<view class="lineA ss-m-y-10"></view>
			<view class="order-bot">
				<view class="">
					<view class="list ss-p-y-6 ss-flex ss-col-center ss-row-between ss-m-x-8">
						<uni-tooltip :content="userInfo.performance_tip">
							<view class="text colGray ss-flex ss-col-center ss-p-l-8 ss-p-r-0 ss-row-center">
								<view class="">
									{{'总业绩'}}
								</view>
								<uni-icons type="help-filled" size="14" color="#808080"></uni-icons>
							</view>
						</uni-tooltip>
						<view class="text ss-font-25">{{userInfo.performance}}</view>
					</view>
					<view class="lineA"></view>
				</view>
				<view class="">
					<view class="list ss-p-y-6 ss-flex ss-col-center ss-row-between ss-m-x-8">
						<uni-tooltip :content="userInfo.performance_tip">
							<view class="text colGray ss-flex ss-col-center ss-p-l-8 ss-p-r-0 ss-row-center">
								<view class="">
									{{'上月零售业绩'}}
								</view>
								<uni-icons type="help-filled" size="14" color="#808080"></uni-icons>
							</view>
						</uni-tooltip>
						<view class="text ss-font-25">{{userInfo.lastMonthPerformance}}</view>
					</view>
					<view class="lineA"></view>
				</view>
				<view class="">
					<view class="list ss-p-y-6 ss-flex ss-col-center ss-row-between ss-m-x-8">
						<uni-tooltip :content="userInfo.performance_tip">
							<view class="text colGray ss-flex ss-col-center ss-p-l-8 ss-p-r-0 ss-row-center">
								<view class="">
									{{'本月零售业绩'}}
								</view>
								<uni-icons type="help-filled" size="14" color="#808080"></uni-icons>
							</view>
						</uni-tooltip>
						<view class="text ss-font-25">{{userInfo.monthPerformance}}</view>
					</view>
					<view class="lineA" v-if="userInfo.is_store == 1"></view>
				</view>

				<view class="list ss-p-y-6 ss-flex ss-col-center ss-row-between ss-m-x-8" v-if="userInfo.is_store == 1"
					@tap.stop="Jump('store')">
					<view class="text colGray ss-flex ss-col-center ss-p-l-8 ss-p-r-0">
						<view class="">
							{{'门店奖励业绩'}}
						</view>
						<uni-icons type="right" size="12" color="#808080"></uni-icons>
					</view>
					<view class="text ss-font-25">{{userInfo.store_performance}}</view>
				</view>
			</view>
		</view>
		<view class="list-box ss-m-t-20">
			<view class="selectK">
				<vvSelect :list="state.range" label="name" valueKey="level" placeholder-style="color: #F5F5F5"
					style="width:100%;" ref="vvSelect" @change="change" :placeholder="state.rightText" :font="30">
				</vvSelect>
				<uni-icons type="bottom" size="14" color="#808080"></uni-icons>
			</view>
			<view class="ss-p-y-20 ss-m-10 ss-flex border-bottom ss-col-center"
				v-for="(i,index) in state.pagination.data" :key="index">
				<view class="left ss-m-r-10">
					<image class="logo" :src="sheep.$url.cdn(i.avatar)" mode=""></image>
					<view class="text ss-m-t-2">{{i.agent.level_info.name}}</view>
				</view>
				<view class="right">
					<view class="name ss-m-b-8">
						<view>{{i.nickname}}</view>
					</view>
					<view class="text ss-m-b-6 ss-flex">
						<view>{{i.mobile||'-'}}</view>
						<view class="ss-flex">上月业绩：<view class="colRed">
								{{i.lastMonthPerformance||'-'}}
							</view>
						</view>
					</view>
					<view class="text ss-m-b-6 ss-flex">
						<view class="ss-flex">总业绩：<view class="colRed">{{i.performance||'-'}}</view>
						</view>
						<view class="ss-flex">本月业绩：<view class="colRed">{{i.monthPerformance||'-'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="state.loadStatus == 'more'" :status="state.loadStatus" :content-text="{
			  contentdown: '点击加载更多',
			}" @tap="loadmore" />
			<uni-load-more v-if="state.loadStatus == 'noMore'" :status="state.loadStatus" :content-text="{
			  contentdown: '暂无用户' }" />
		</view>
	</s-layout>
</template>

<script setup>
	import vvSelect from '@/pages/index/components/vv-select.vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive
	} from 'vue';
	import {
		isEmpty,
		_
	} from 'lodash';

	const userInfo = computed(() => sheep.$store('user').userInfo);
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/order/order_bg.png');
	const state = reactive({
		pagination: {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
		loadStatus: '',
		rightText: '用户等级',
		level: '',
		range: [],
	});

	// 团员列表
	async function getList(page = 1, list_rows = 8) {
		state.loadStatus = 'loading';
		let res = await sheep.$api.commission.team({
			list_rows,
			page,
			level: state.level
		});
		if (res.code === 1) {
			state.pagination.data = state.pagination.data.concat(res.data.data)
			state.pagination.current_page = res.data.current_page
			if (state.pagination.current_page < res.data.last_page) {
				state.loadStatus = 'more';
				console.log('more')
			} else {
				state.loadStatus = 'noMore';
				console.log('noMore')
			}
		}
	};
	// 等级
	async function getlevelList() {
		state.loadStatus = 'loading';
		let res = await sheep.$api.commission.getLevel();
		if (res.code === 1) {
			res.data.unshift({
				level: '',
				name: '全部等级'
			})
			state.range = res.data
			console.log(state.range,'state.range')
		}
	};
	// 选择等级
	const change = (e) => {
		state.pagination.data = []
		state.level = e
		getList();
	};
	// 跳转
	const Jump = (url) => {
		uni.navigateTo({
			url
		})
	};

	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.pagination.current_page + 1);
		}
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadmore();
	});

	onShow(async () => {
		state.pagination.data = []
		sheep.$store('user').getInfo();
		getList();
		getlevelList()
	})
</script>

<style lang="scss" scoped>
	.state-box {
		color: rgba(#fff, 0.9);
		width: 100%;
		height: 400rpx;
		background-size: 750rpx 100%;
		box-sizing: border-box;
	}

	.colRed {
		color: #E84010;
	}

	:deep(.uni-tooltip-popup) {
		min-width: 200rpx;
		text-align: center;
	}

	.colGray {
		color: #979797 !important;
	}

	.line {
		height: 2rpx;
		width: 100%;
		background-color: #D9D9D999;
		margin: 0 auto;
	}

	.order-bot {
		width: 100%;
		font-size: 24rpx;
		color: #979797;

		.list {
			height: 50rpx;
			text-align: center;

			.left {
				text-align: center;
				width: 100%;
			}

			.text {
				color: #000;
			}



			&:last-child {
				border-bottom: none;
			}
		}
	}

	.list-box {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx 26rpx;
		padding: 30rpx 20rpx 20rpx 6rpx;
		font-size: 30rpx;
		box-sizing: border-box;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		box-shadow: 0 0 8rpx 8rpx #f4f4f6;

		.selectK {
			display: flex;
			align-items: center;
			margin-left: 10rpx;
			font-size: 26rpx;
			justify-content: space-between;
		}

		.left {
			width: 22%;
			font-size: 24rpx;
			text-align: center;

			.text {
				text-align: center;
				justify-content: space-between;
				font-size: 22rpx;
			}

			.logo {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}
		}

		.right {
			width: 85%;
			justify-content: space-between;

			.name {
				font-size: 30rpx;
				color: #000;
			}

			.text {
				justify-content: space-between;
				font-size: 25rpx;
				color: #BABABA;
			}
		}

	}

	.order-address-box {
		background-color: #fff;
		border-radius: 10rpx;
		margin: -176rpx 24rpx 16rpx 24rpx;
		padding: 30rpx 10rpx 20rpx 10rpx;
		font-size: 30rpx;
		box-sizing: border-box;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);

		.lineA {
			background-color: #f3f3f3;
			width: 97%;
			height: 2rpx;
			margin: 0 auto;
		}

		.order-top {
			.box {
				width: 24%;
				text-align: center;
			}

			.des {
				font-size: 36rpx;
				color: #000;
				font-weight: 600;

				.id {
					font-size: 26rpx;
					color: #979797;
					font-weight: 400;
				}

				.lev {
					background: #fbdacd;
					padding: 2rpx 14rpx;
					margin-left: 14rpx;
					height: 38rpx;
					line-height: 38rpx;
					font-variant: titling-caps;
					font-size: 22rpx;
					color: #e84010;
					border-radius: 20rpx;
				}
			}
		}

		.logo {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}
	}
</style>